<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<#include "/common/include.ftl">
<style>
  body {
    padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
  }
</style>
<script type="text/javascript" src="${serverName}/pages/index/findex.js"></script>
</head>
<body>


	<div id="wrap">
		<!-- Fixed navbar -->
      	<div id="headerMenuComponent" class="navbar navbar-inverse navbar-fixed-top">


        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/nav.html">Project name</a>
          </div>
          <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
			<form class="navbar-form navbar-right" role="search">
		      <div class="form-group">
		        <input type="text" class="form-control" placeholder="Search">
		      </div>
		      <button type="submit" class="btn btn-default">Submit</button>
		    </form>
          </div><!--/.nav-collapse -->

        </div>


        </div>
     </div>

	<div class="container">

        <div class="page-header">
	        <div class="row">
	        	<div class="col-lg-9">
	        		<h1>Xiaoxia Financial show <small>In September 2013 report</small></h1>
	        	</div>
	        	<div class="col-lg-3">
					<h1>
						<div class="input-group">
					      <input type="text" class="form-control" readonly="readonly" value="2012-05-15" id="form_datetime">
					      <span class="input-group-btn">
					        <button type="button" class="btn btn-default">
							  <span class="glyphicon glyphicon-calendar"></span>
							</button>
					      </span>
					    </div>
					</h1>
	        	</div>
	        </div>
        </div>

        <script type="text/javascript">
		    $("#form_datetime").datetimepicker({format: 'yyyy-mm'});
		</script>

        <div class="row">
			 <div class="col-md-3" >
			  	<blockquote>
				  <p><strong> Monetary Value</strong></p>
			  	  <h4 class="text-success">$2312.12</h4>
			  	  <small>2013-08-21</small>
				</blockquote>
				<blockquote>
			  	  <h4 class="text-error">$122.12</h4>

				<div class="progress">
				  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
				    <span class="sr-only">80% Complete</span>
				  </div>
				</div>
				</blockquote>
			 </div>

			 <div class="col-md-9" id="rightPieChart">
			 	<div class="row">
					<div class="col-md-5" >
						<p class="text-center"><canvas id="canvas" height="250" width="250"></canvas></p>
					</div>
					<div class="col-md-7" >
					 	  <p><i class="icon-briefcase"></i><strong> Monetary Value null</strong></p>
					      <p class="muted"><strong>rendered as bold text</strong></p>
						  <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
						  <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
						  <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
						  <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

						  <abbr title="attribute">attr</abbr>

						  <a href="mailto:#">first.last@example.com</a>
					</div>
				</div>
			  </div>
			</div>

        <div class="row">
			 <div class="col-md-4" >
			  	<p><i class="icon-briefcase"></i><strong> Monetary Value</strong></p>
			      <p class="muted"><strong>rendered as bold text</strong></p>
				  <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
				  <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
				  <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
				  <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

				  <abbr title="attribute">attr</abbr>

				  <a href="mailto:#">first.last@example.com</a>
			 </div>

			 <div class="col-md-8">
			  		<p class="text-center"><canvas id="canvas_line" height="250" width="750"></canvas></p>
			  </div>
		</div>

		<#--<div class="row">
			 <div class="col-md-4" >

			 	<div class="panel panel-primary">
					  <div class="panel-heading">Monetary Value</div>
					  <div class="panel-body">
					   	<blockquote>
					  	  <h4 class="text-success">$2312.12</h4>
					  	  <small>2013-08-21</small>
						</blockquote>
					  </div>
			 	</div>

			 </div>

			 <div class="col-md-8">

			  </div>
		</div>-->




	 </div>


</body>
</html>